<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <my-breadcrumb>个人设置</my-breadcrumb>
      </div>
      <el-row>
        <el-col :span="16">
            <!-- 表单 -->
            <el-form label-width="80px">
              <el-form-item label="编号">
                <span>{{userInfo.id}}</span>
              </el-form-item>
               <el-form-item label="手机">
                <span>{{userInfo.mobile}}</span>
              </el-form-item>
               <el-form-item label="名称">
                <el-input v-model="userInfo.name" />
              </el-form-item>
               <el-form-item label="简介">
                <el-input type="textarea" v-model="userInfo.intro" />
              </el-form-item>
               <el-form-item label="邮箱">
                <el-input v-model="userInfo.email" />
              </el-form-item>
              <el-form-item>
                <el-button  @click="hSave" type="primary">保存设置</el-button>
              </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8">
          <!-- 由于 element 的 upload 组件不支持自定义请求方法（默认只支持 POST方式
          ，我们的接口要的方式是 PATCH），所以我们需要自定义上传组件的请求行为
          http-request="hUpload",它会覆盖默认的上传动作，可以自定义上传的实现。 -->
            <el-upload
              class="avatar-uploader"
              action=""
              :http-request="hUpload"
              :show-file-list="false"
              :on-success="hSuccess"
              :before-upload="beforeAvatarUpload">
                <!-- 当上传成功之后，imageUrl就会有值，此时做预览
                  给img设置了src后，显示图片内容的过程是异步的 ---- 并不是设了src后就可以立即看到图片的

                  问：你怎么知道图片已经完成了加载？
                -->
                <el-image v-if="imageUrl" :src="imageUrl" class="avatar"/>
                <!-- 没有上传之前，这里是一个大大的 + -->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: '',
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      userInfo: {
        email: '',
        id: '',
        intro: '',
        mobile: '',
        name: '',
        photo: ''
      }
    }
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    // 发请求拿用户数据
    async loadUserInfo () {
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/user/profile'
        })
        // 这里的目的就是为了拿到这个
        // console.log(res)
        const { email, id, intro, mobile, name, photo } = res.data.data
        this.userInfo = { email, id, intro, mobile, name }
        this.imageUrl = photo
      } catch (err) {
        console.log(err)
      }
    },
    // 发请求修改头像
    async hUpload (config) {
      // console.log(config) 这个config是方法自带的参数,就是选中的文件自身
      try {
        const fd = new FormData()
        fd.append('photo', config.file)
        const res = await this.$axios({
          url: '/mp/v1_0/user/photo',
          method: 'PATCH',
          data: fd
        })
        this.$message.success('头像更新成功')
        console.log(res)
        // 本地更新
        this.imageUrl = res.data.data.photo
        // 发通知,让layout更改头像
        this.$eventBus.$emit('userinfo-update', { newPhoto: this.imageUrl })
      } catch (err) {
        console.log(err)
        this.$message.error('头像更新失败')
      }
    },
    // 上传成功后的动作,基本没啥用
    hSuccess () {

    },
    // 上传之前的验证准备,验证上传的文件是否符合规格
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      // file.size 单位是字节
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 保存修改的用户信息
    async doSave () {
      const { name, intro, email } = this.userInfo
      try {
        const res = await this.$axios({
          method: 'PATCH',
          url: '/mp/v1_0/user/profile',
          data: {
            name,
            intro,
            email
          }
        })
        console.log(res)
        this.$message.success('修改成功')
        // 还有一步不同子部件之间的传值
        // 通知layout更改名字
        this.$eventBus.$emit('userinfo-update', { newName: name })
      } catch (err) {
        console.log(err)
        this.$message.error('修改失败')
      }
    },
    // 定义验证规则,验证输入的是否符合要求
    validate () {
      const regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z]{2,4}$/

      const { name, intro, email } = this.userInfo
      if (name === '' || intro === '' || email === '') {
        this.$message.error('用户名，简介，邮箱 不能为空')
        return false
      }
      // 验证邮箱格式
      if (!regEmail.test(email)) {
        this.$message.error('邮箱格式不对')
        return false
      }
      return true
    },
    // 点击保存按钮,保存修改的用户信息
    hSave () {
      // 先验证是否能通过
      if (!this.validate()) {
        return
      }
      // 验证通过,保存信息
      this.doSave()
    }
  }

}
</script>

<style lang="less" scoped>

.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ddd;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
